import React from 'react';
import { connect, Dispatch } from 'umi';

import { Modal, Form, Input, message } from 'antd';

import { ConnectState, IResponse } from '@/models/connect';
import { dashboardGroupsItem, PanelsItem } from '@/pages/SelfQuery/type';

interface RenameModelProps {
  visible: boolean;
  onCancel: () => void;
  dispatch: Dispatch;
  operationGroup: dashboardGroupsItem
  panelsItem: PanelsItem;
}

const RenameModel: React.FC<RenameModelProps> = (props) => {
  const { visible, operationGroup, panelsItem, onCancel, dispatch } = props;
  const [form] = Form.useForm();
  const { validateFields } = form;

  // 存储分组名称
  const establish = () => {
    validateFields().then(async (values) => {
      dispatch({
        type: 'board/saveRenameGroup',
        payload: {
          id: operationGroup.id,
          name: values.name
        },
        callback: (res: IResponse) => {
          const { header } = res;
          if (header.code === 200) {
            message.success('重命名成功');
            // 重新获取看板详情
            dispatch({
              type: 'panel/fetchDashboard',
              payload: { portalId: panelsItem.dashboardPortalId, dashboardId: panelsItem.dashboardId },
            });

            onCancel()
          } else {
            message.warning('重命名失败');
          }
        },
      });
    });
  };

  return (
    <Modal
      title="重命名"
      destroyOnClose
      visible={visible}
      onOk={establish}
      onCancel={() => {
        onCancel();
      }}
    >
      <Form name="form" form={form}>
        <Form.Item name="name" label="分组名称" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default connect(({}: ConnectState) => ({}))(RenameModel);
